<template>
  <section class="banner-brand__wrapper" :style="{ ...bgImageStyle }">
    <div class="banner-brand__content">
      <div class="avatar" v-if="frontmatter?.customBanner?.avatar">
        <img class="img" :src="avatarImage" />
      </div>
      <h1 class="title" v-if="frontmatter?.customBanner?.title">
        {{ frontmatter?.customBanner?.title }}
      </h1>

      <p class="description" v-if="frontmatter?.customBanner?.description">
        {{ frontmatter?.customBanner?.description }}
      </p>

      <p class="tagline" v-if="frontmatter?.customBanner?.tagline">
        {{ frontmatter?.customBanner?.tagline }}
      </p>

      <div class="btn-group" v-if="buttons.length > 0">
        <Xicons
          v-for="(btn, index) in buttons"
          :class="btn.type"
          :key="index"
          :icon="btn.icon"
          :text="btn.text"
          :link="btn.link"
          icon-size="18"
          text-size="14"
        />
      </div>

      <ul class="social-links" v-if="socialLinks.length > 0">
        <li
          class="social-item"
          v-for="(item, index) in socialLinks"
          :key="index"
        >
          <Xicons
            :icon="item.icon"
            :link="item.link"
            :style="{ color: item.color }"
            target="_blank"
          />
        </li>
      </ul>

      <div class="shields-wrapper">
        <div class="hot-title">热点地区</div>
        <div class="hot-subtitle">中华人民共和国万岁，世界人民大团结万岁！</div>
        <ul class="hot-list" v-if="hots.length > 0">
          <li v-for="(item, index) in hots" :key="index">
            <div>{{ item.text }}</div>
          </li>
        </ul>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { usePageFrontmatter, withBase } from '@vuepress/client'
import Link from 'vuepress-theme-reco/lib/client/components/Link.vue'
import { createOneColor } from 'vuepress-theme-reco/lib/client/utils'

const frontmatter = usePageFrontmatter()

const heroImage = computed(() => {
  return frontmatter.value?.customBanner?.heroImage
    ? withBase(frontmatter.value?.customBanner?.heroImage)
    : null
})

const avatarImage = computed(() => {
  return frontmatter.value?.customBanner?.avatar
    ? withBase(frontmatter.value?.customBanner?.avatar)
    : null
})

const buttons = computed(() => {
  return frontmatter.value?.customBanner?.buttons || []
})

const hots = computed(() => {
  return frontmatter.value?.customBanner?.hots || []
})

const socialLinks = computed(() =>
  (frontmatter.value?.customBanner?.socialLinks || []).map((item) => {
    if (!item.color) item.color = createOneColor()
    return item
  })
)

const heroImageStyle = computed(
  () => frontmatter.value.customBanner.heroImageStyle || {}
)

const bgImageStyle = computed(() => {
  const { bgImageStyle, bgImage } = frontmatter.value?.customBanner || {}

  const initBgImageStyle = bgImage
    ? {
        overflow: 'hidden',
        background: `url(${withBase(bgImage)}) center/cover no-repeat`,
      }
    : {}

  return bgImageStyle
    ? { ...initBgImageStyle, ...bgImageStyle }
    : initBgImageStyle
})
</script>

<style scoped lang="stylus">
.banner-brand__content {
  position: relative;
}

.shields-wrapper {
  @apply: mt-20 text-left;

  img {
    @apply: inline-block ml-0 mr-1 my-1 w-auto h-6 !important;
  }

  .hot-title {
    font-size: 18px;
    color: #000;
    font-weight: 500;
  }

  .hot-subtitle {
    font-size: 14px;
    margin-top: 0.5em;
    color: rgba(60, 60, 67, 0.75);
  }

  .hot-list {
    margin-top: 0.5em;
    padding-left: 0;

    li {
      display: inline-block;
      background: #f1f1f1;
      padding: 0 8px;
      border-radius: 5px;
      font-size: 14px;
      margin-right: 10px;
      cursor: default;
      user-select: none;
      border: 1px solid rgba(166, 166, 166, 0.5);
    }
  }
}

.avatar {
  width: 135px;
  border-radius: 50%;
  overflow: hidden;
  animation:rolling 30s ease-in-out infinite;

  .img {
    object-fit: cover;
  }
}

@keyframes rolling {
  0% {
    transform: translateX(0px) rotate(0deg);
  }

  25% {
    transform: translateX(170px) rotate(180deg);
  }

  50% {
    transform: translateX(340px) rotate(360deg);
  }

  75% {
    transform: translateX(170px) rotate(180deg);
  }

  100% {
    transform: translateX(0px) rotate(0deg);
  }
}
</style>
